<template>
  <div>
    <div>
      <div>产品管理主页面</div>
      <!-- 后续需要绑定值,后台传递的所有产品 ,分类也未绑定内容-->
      <!-- 头部查询 -->
      <div>
        <el-form label-width="auto" style="width: 100%">
          <el-row>
            <el-col :span="5">
              <el-form-item label="产品名称" aria-placeholder="请输入">
                <el-input v-model="tj.productName" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="产品分类">
                <el-select v-model="tj.productType" placeholder="请选择" style="width: 240px">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-button style="margin-left:30px ; margin-right:10px ;" type="primary" @click="init">查询</el-button>
              <el-button type="primary" @click="clear">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 图片及其内容展示 -->
      <!-- <div>
        <el-row>
          <el-col v-for="o in data" :key="o.value" :span="5" @click="productDetail(o)" style="margin-left:30px">
            
            <el-card shadow="hover" style="max-width: 100% ;">
             
              <el-image v-bind:src="o.url" style="width:100%; height: 100% ; text-align: center; " />
             
              <template #footer>
                <span>名称:{{ o.name }}</span><br />
                <span>价格:{{ o.money }}</span>
              </template>
            </el-card>
          </el-col>
        </el-row>
      </div> -->
      <Goods v-for="(o,index) in data" :key="index" :product="o" />


      <!-- 页码 -->
      <div>
        <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="chgPage"/>
      </div>
    </div>
  </div>
</template>

<script setup>

import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Goods from "./goods.vue"
import { selectProduct } from "@/api/productApi.ts"

//配置路由跳转
const router = useRouter();
//产品总条数
const total = ref(0)
//页码发生变化
function chgPage(page) {
  console.log(page);
  tj.value.pageNum = page
  init();
}
//数据接收对象
const data = ref([])
//数据初始化
onMounted(() => { 
  init()
})
//初始化方法
async function init() { 
  if (tj.value.productType == "") { tj.value.productType = 0 } 
  const res = await selectProduct(tj.value)
  tj.value.productType = ""
  console.log(res.data)
  total.value = res.data.total
  data.value = res.data.data
}
//条件
const tj = ref({
  productName: "",
  model: "",
  productType: "",
  pageNum: 1,
  pageSize: 8,
})
//重置
function clear() { 
  tj.value = {
    productName: "",
    model: "",
    productType: "",
    pageNum: 1,
    pageSize: 8,
  }
}
//选择列表
const options = [
  {
    label: '反击类',
    value: '1',
  },
  {
    label: '鄂破类',
    value: '2',
  },
  {
    label: '圆锥类',
    value: '3',
  }
]

</script>

<style scoped>
.el-pagination {
  border: 1px solid #dcdfe5;
  margin-top: 50px;
  padding-left: 300px;
}

.el-col {
  margin: 5px;
}

.el-row {
  margin: 3px 0;
}
</style>
